﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link href="~/css/shop.css" type="text/css" rel="stylesheet" />
    <link href="~/css/Sellerber.css" type="text/css" rel="stylesheet" />
    <link href="~/css/bkg_ui.css" type="text/css" rel="stylesheet" />
    <link href="~/font/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="~/layui/css/layui.css" rel="stylesheet" />
    <script src="~/js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="~/js/jquery.cookie.js"></script>
    <script src="~/js/shopFrame.js" type="text/javascript"></script>
    <script src="~/js/Sellerber.js" type="text/javascript"></script>
    <script src="~/js/layer/layer.js" type="text/javascript"></script>
    <script src="~/js/laydate/laydate.js" type="text/javascript"></script>
    <script type="text/javascript" src="~/js/proTree.js"></script>
    <script src="~/js/dist/echarts.js" type="text/javascript"></script>
    <script src="~/layui/layui.js"></script>
    <script src="~/js/TimeFormat.js"></script>
    <!--[if lt IE 9]>
    <script src="~/js/html5shiv.js" type="text/javascript"></script>
    <script src="~/js/respond.min.js"></script>
    <script src="~/js/css3-mediaqueries.js"  type="text/javascript"></script>
      <![endif]-->
    <title>品牌管理</title>
</head>

<body>
    <div class="margin" id="page_style">
        <div class="operation clearfix mb15 same_module">
            <ul class="choice_search">
                <li class="clearfix col-xs-2 col-lg-3 col-ms-3 ">
                    <label class="label_name ">品牌名称：</label>
                    <input placeholder="输入品牌名称" name="" type="text" class="form-control col-xs-8 col-lg-8 col-ms-8" />
                </li>
                <li class="clearfix col-xs-2 col-lg-3 col-ms-3">
                    <label class="label_name ">添加时间：</label>
                    <input class="inline laydate-icon form-control Select_Date" id="start" />
                </li>
                <li class="clearfix col-xs-2 col-lg-3 col-ms-3 ">
                    <button type="button" class="btn button_btn bg-deep-blue "><i class="icon-search"></i>查询</button>
                </li>
            </ul>
        </div>
        <div class="h_products_list clearfix mb15" id="Sellerber">
            <!--品牌展示-->
            <div class="Sellerber_left menu" id="menuBar">
                <div class="show_btn" id="rightArrow"><span></span></div>
                <div class="side_title"><a title="隐藏" class="close_btn"><span></span></a></div>
                <div class="menu_style" id="menu_style">
                    <div class="list_content">
                        <div class="side_list">
                            <div id="main" style="height:250px;" class="side_list"></div>
                        </div>
                    </div>
                </div>
            </div>
            <!--品牌列表-->
            <div class="list_Exhibition list_show padding15">
                <div class="operation clearfix mb15  same_module">
                    <span class="l_f">
                        <a href="Add_Brand" title="添加品牌" class="btn button_btn bg-deep-blue"><i class="fa fa-plus"></i>添加品牌</a>
                        <a href="javascript:ovid()" class="btn  button_btn btn-danger"><i class="fa fa-trash"></i>批量删除</a>

                    </span>
                    <span class="r_f">共：<b>234</b>个品牌</span>
                </div>
                <div class=" datalist_show">
                    <div class="datatable_height confirm">
                        <table class="table table_list table_striped table-bordered" id="sample-table" lay-filter="demo">
                        </table>
                        <script type="text/html" id="switchTpl">
                            <input type="checkbox" name="{{d.Status}}" value="{{d.Id}}" lay-skin="switch" lay-text="上架|下架" lay-filter="statusDemo" {{ d.Status == 1 ? 'checked' : '' }}={{ d.Status == 1 ? 'checked' : '' }} />
                        </script>
                        <script type="text/html" id="barDemo">
                            <a title="编辑" href="javascript:;" lay-event="edit" class="btn btn-xs btn-info">编辑</a>
                            <a title="删除" href="javascript:;" lay-event="del" class="btn btn-xs btn-delete">删除</a>
                        </script>
                    </div>
                </div>

                @*修改*@
            <div class="left_add clearfix" id="changeBrand" style="display:none">
                <div class="column_title">修改品牌</div>
                <ul class="add_conent">
                    <li class=" clearfix"><label class="label_name"><i>*</i>品牌名称：</label> <input name="" type="text" id="name" class="add_text form-control" /></li>
                    <li class=" clearfix"><label class="label_name"><i>*</i>品牌序号：</label> <input name="" type="text" id="num" class="add_text form-control" style="width:80px" /></li>
                    <li class=" clearfix">
                        <label class="label_name">品牌图片：</label>
                        <div class="demo l_f">
                            <div class="logobox"><div class="resizebox"><img id="brandImg" src="~/images/image.png" width="100px" alt="" height="100px" /></div></div>
                            <div class="logoupload">
                                <div class="btnbox"><input type="file" id="uploadBtnHolder" class="uploadbtn" />上传替换</div>
                                <div style="clear:both;height:0;overflow:hidden;"></div>
                                <div class="progress-box" style="display:none;">
                                    <div class="progress-num">上传进度：<b>0%</b></div>
                                    <div class="progress-bar"><div style="width:0%;" class="bar-line"></div></div>
                                </div>
                            </div>

                        </div> <div class="prompt"><p>图片大小<b>120px*60px</b>图片大小小于5MB,</p><p>支持.jpg;.gif;.png;.jpeg格式的图片</p></div>
                    </li>
                    <li class=" clearfix"><label class="label_name"><i>*</i>排序：</label> <input name="" id="OrderBy" type="text" class="add_text" style="width:120px" /></li>
                    <li class=" clearfix"><label class="label_name">品牌描述：</label> <textarea name="" id="desctext" cols="" rows="" class="textarea" onkeyup="checkLength(this);"></textarea><span class="wordage">剩余字数：<span id="sy" style="color:Red;">500</span>字</span></li>
                    <li class=" clearfix">
                        <label class="label_name"><i>*</i>显示状态：</label>
                        <label><input name="checkbox" type="radio" class="ace" id="IsHide" checked="checked" /><span class="lbl">显示</span></label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <label><input type="radio" class="ace" name="checkbox" id="IsShow" /><span class="lbl">不显示</span></label>
                    </li>
                </ul>
                <div class="operation clearfix mb20 same_module align">
                    <input name="" type="button" class="btn button_btn bg-deep-blue" id="Save" value="保存" />
                    <input name="" type="reset" value="取消" class="btn button_btn btn-Dark-success" />
                </div>
            </div>
            </div>
        </div>
    </div>
</body>
</html>
<script>

     layui.use(['table', 'util'], function () {
         //用table就要定义
         var table = layui.table;
         //用form就要定义
         var form = layui.form;

         //表格加载
         table.render({
             elem: '#sample-table'
             , height: 500
             , url: '/Commodity/GetBrands' //数据接口
             , page: true //开启分页
             , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
             , cols: [[ //表头
                 { field: 'Id', title: 'Id', sort: true,align:'center' }
                 , { field: 'Name', title: '品牌名称', sort: true,align:'center'}
                 , { field: 'Logo', title: '品牌Logo' ,align:'center'}
                 , { field: 'Desctext', title: '品牌描述 ',align:'center' }
                 , { field: 'Status', title: '品牌状态',templet: '#switchTpl',align:'center'}
                 , { field: 'OrderBy', title: '排序', sort: true ,align:'center'}
                 , { field: 'UpdateTime', title: '最后修改时间', width: 120, sort: true,align:'center', templet: '<div>{{ Format(d.UpdateTime,"yyyy-MM-dd hh:mm:ss")}}</div>' }
                 , { title: '操作', fixed: 'right', width: 200, align: 'center', toolbar: '#barDemo' }
             ]]
         });

         //监听工具条
    table.on('tool(demo)', function (obj) {
        var data = obj.data;
        if (obj.event === 'detail') {
            member_detail(data);
        } else if (obj.event === 'del') {
            member_del(data);

        } else if (obj.event === 'edit') {
            member_edit(data);
        }
    });
         form.on('switch(statusDemo)', function (obj) {
              $.ajax({
                  url: "/Commodity/UpdateStatusByBrand",
                  data: { Id: this.value,Status:obj.elem.name==0?1:0},
            type: "post",
            success: function (data) {
                if (data.Success) {
                    var statu = obj.elem.name == 0 ? "已上架" : "已下架";
                    layer.msg(statu, { icon: 1, time: 1000 });
                      layui.table.reload('sample-table', {//就会读取后台数据,重新加载；
                        where: {
                        }
                    });
                }
            }
        });
         })
     });
	//设置内页框架布局
$(function() {
	$("#Sellerber").frame({
		float : 'left',
		color_btn:'.skin_select',
		Sellerber_menu:'.list_content',
		page_content:'.list_show',//内容
		datalist:".datatable_height",//数据列表高度取值
		header:65,//顶部高度
		mwidth:350,//宽度自定义
		minStatue:true,

	});
});
function generateOrders(id){
	window.location.href = "Brand_detailed.html?="+id;
};
/*品牌-查看*/
function member_show(title,url,id,w,h){
	layer_show(title,url,w,h);
}
/*品牌-停用*/
/*产品-停用*/
function member_stop(obj,id){
	layer.confirm('确认要下架该品牌吗？该品牌下的所有产品将全部下架。',function(index){
		$(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" class="btn btn-xs " onClick="member_start(this,id)" href="javascript:;" title="上架">上架</a>');
		$(obj).parents("tr").find(".td-status").html('<span class="label label-defaunt radius">已下架</span>');
		$(obj).remove();
		layer.msg('已下架!',{icon: 5,time:1000});
	});
}
/*产品-启用*/
function member_start(obj,id){
	layer.confirm('确认要上架改该品牌吗？',function(index){
		$(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" class="btn btn-xs btn-status" onClick="member_stop(this,id)" href="javascript:;" title="下架">下架</a>');
		$(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">已上架</span>');
		$(obj).remove();
		layer.msg('已上架!',{icon: 6,time:1000});
	});
    }

    var id = 0;
/*产品-编辑*/
    function member_edit(data) {
	layer.open({
        type: 1,
        title: '修改品牌',
        area: ['800px', '500px'],
        shadeClose: false,
        content: $('#changeBrand'),
    });
        $("#name").val(data.Name);
        $("#brandImg").attr("src",data.Logo);
        $("#desctext").val(data.Desctext);
         $("#OrderBy").val(data.OrderB);
        data.Status == 0 ? $("#IsShow").prop("checked", "checked") : $("#IsHide").prop("checked", "checked");
        id = data.Id;
    }

      $("#Save").click(function () {
        var  data = {}
        data.Name = $("#name").val();
        data.Logo = $("#uploadBtnHolder").val();
        data.Desctext = $("#desctext").val();
        data.OrderB = $("#OrderBy").val();
          data.Status = $("#IsShow").prop("checked") ? 0 : 1;
          data.Id = id;
         $.ajax({
            url: "/Commodity/UpdateBrand",
            data: data,
            type: "post",
             success: function (data) {
                 if (data.Success) {
                     layui.layer.msg('修改成功!', { icon: 1, time: 1000 });
                 }
                  layui.table.reload('sample-table', {//就会读取后台数据,重新加载；
                        where: {
                        }
                    });
             }
          })
    })
/*产品-删除*/
function member_del(data){
	layer.confirm('确认要删除吗？',function(index){
        $.ajax({
            url: "/Commodity/DelBrand?Id=" + data.Id,
            type: "post",
            success: function (data) {
                if (data.Success) {

                    layer.msg('已删除!', { icon: 1, time: 1000 });
                      layui.table.reload('sample-table', {//就会读取后台数据,重新加载；
                        where: {
                        }
                    });
                }
            }
        });
	});
}
	//设置时间
laydate({
    elem: '#start',
    event: 'focus'
});
</script>
